import React from 'react';
import { connect } from 'react-redux';
import SearchArea from 'components/search-area';
import { messages } from 'share/common';
import ResizeTable from 'components/resize-table';
import { Form } from 'antd';
import './import-public-card.css';
import moment from 'moment'
import importPublicCardService from './import-public-card.service';
import ImportModal from "components/template/import-modal-ie/import-modal";
import config from "config";

class ImportPublicCard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      data: [],
      searchParams: {
        eid:  "",
        name: "",
        cardNo: "",
        cardStatus: "",
        open: "",
        start: "",
        end: "",
      },
      pagination: {
        current: 1,
        page: 0,
        total: 0,
        pageSize: 10,
        showSizeChanger: true,
        showQuickJumper: true,
      },
      searchForm: [{
        type: 'input',
        id: 'eid',
        label: messages('mcd.basicData.importPublicCard.EID'/* EID */),
        showSearch: true
      }, {
        type: 'input',
        id: 'name',
        label: messages('mcd.basicData.importPublicCard.name'/* 姓名 */),
        showSearch: true
      }, {
        type: 'input',
        id: 'cardNumber',
        label: messages('mcd.basicData.importPublicCard.number'/* 公务卡号 */),
        showSearch: true
      }, {
        type: 'select',
        id: 'status',
        label: messages('mcd.basicData.importPublicCard.status'/* 公务卡状态 */),
        options: [{
            value: '正常',
            label: '正常'
          }, {
            value: '其他',
            label: '其他'
          }],
        showSearch: true
      }, {
        type: 'select',
        id: 'open',
        label: messages('mcd.basicData.importPublicCard.isOpen' /* 是否开卡 */),
        options: [{
            value: '未开',
            label: '未开'
          }, {
            value: '已开',
            label: '已开'
          }],
        showSearch: true
      },{
        type: 'items', id: 'dateRange', items: [
        {type: 'date', id: 'start', label: messages('mcd.basicData.importPublicCard.startTime')/*发卡日期从*/, event: 'DATE'},
        {type: 'date', id: 'end', label: messages('mcd.basicData.importPublicCard.endTime')/*发卡日期至*/, event: 'DATE'}
      ]}
    ],
      columns: [
        {
          title: messages('mcd.basicData.importPublicCard.EID'/*EID*/),
          key: "eid",
          dataIndex: 'eid'
        },
        {
          title: messages('mcd.basicData.importPublicCard.name'/*姓名*/),
          key: "name",
          dataIndex: 'name'
        },
        {
        　title: messages('mcd.basicData.importPublicCard.number'/* 公务卡号 */),
        　key: "cardNumber",
        　dataIndex: 'cardNumber'
        },
        {
        　title: messages('mcd.basicData.importPublicCard.status'/* 公务卡状态　*/),
        　key: "status",
        　dataIndex: 'status'
        },
        {
        　title: messages('mcd.basicData.importPublicCard.isOpen' /* 是否开卡　*/),
        　key: "open",
        　dataIndex: 'open'
        },
        {
        　title: messages('mcd.basicData.importPublicCard.quota'/* 公务卡额度　*/),
        　key: "quota",
        　dataIndex: 'quota'
        },
        {
        　title: messages('mcd.basicData.importPublicCard.sTime'/* 发卡日期*/),
        　key: "openDate",
        　dataIndex: 'openDate',
          render: (value,record) =>
            moment(record.openDate).format('YYYY-MM-DD')
        }],
    };
  }

  componentWillMount() {
    //记住页码
    let _pagination = this.getBeforePage();
    let pagination = this.state.pagination;
    pagination.page = _pagination.page;
    pagination.current = _pagination.page + 1;
    this.setState({
      pagination,
    }, () => {
      this.clearBeforePage();
      this.getList();
    })
  }

  //获取公务卡数据
  getList() {
    this.setState({loading: true});
    const {searchParams, pagination} = this.state;
    let params = Object.assign({}, this.state.searchParams);
    for (const key in params) {
      if (params[key]) {
        //删除为null的
      } else if (!params[key]) {
        delete params[key];
      }
    }
    params.page = pagination.page;
    params.size = pagination.pageSize;
    importPublicCardService.getPublicCardByOptions(params).then((response) => {
      response.data.records.map((item, index) => {
        item.key = item.id;
      });
      let pagination = this.state.pagination;
      pagination.total = response.data.total;
      this.setState({
        data: response.data.records,
        pagination,
        loading: false
      })
    })
  };

  handleSearch = (values) => {
    let searchParams = {
      eid: !values.eid ? "" : values.eid,
      name: !values.name ? "" : values.name,
      cardNo: !values.cardNumber ? "" : values.cardNumber,
      cardStatus: !values.status ? "" : values.status,
      open: !values.open ? "" : values.open,
      start: !values.start ? "" : moment(values.start).format('YYYY-MM-DD+00:00:00'),
      end: !values.end ? "" : moment(values.end).format('YYYY-MM-DD+00:00:00')
    };
    for (const key in searchParams) {
      if (searchParams[key]) {
        //删除为null的
      } else if (!searchParams[key]) {
        delete searchParams[key];
      }
    }
    let pagination = this.state.pagination;
    pagination.page = 0;
    pagination.pageSize = 10;
    pagination.current = 1;
    this.setState({
      searchParams,
      pagination,
      loading: true,
      page: 1
    }, () => {
      this.getList();
    })
  };

  //分页点击
  onChangePager = (pagination, filters, sorter) => {
    this.setState({
      pagination: {
        current: pagination.current,
        page: pagination.current - 1,
        pageSize: pagination.pageSize,
        total: pagination.total
      }
    }, () => {
      this.getList();
    })
  };

  render() {
    const {searchForm, loading, data, columns, pagination} = this.state;
    return (
      <div className="budget-structure">
        <SearchArea searchForm={searchForm} submitHandle={this.handleSearch} clearHandle={() => {
        }}/>
        <div className="table-header">
          <div className="table-header-title">
            {/*共搜索到*条数据*/}
            {messages('common.total', {total: `${pagination.total}`})}
          </div>
          <div className="table-header-buttons">
            
            <ImportModal downLinks={null}
                         hasErrInfo={true}
                         uploadUrl={`${config.baseUrl}/api/card`}
                         onCancel={this.getList}
                         isNormalModal={true}
                         templates={[{
                          downloadName: messages('components.key1341')/*公务卡导入模版*/,
                          templateName: messages('components.key1341')/*公务卡导入模版*/,
                          downloadUrl: `/api/card/bank/import/template`,
                          downloading: "downloading"
                        }]}
                         />
            &nbsp; &nbsp; &nbsp;
          </div>
        </div>
        <ResizeTable
          loading={loading}
          dataSource={data}
          columns={columns}
          pagination={pagination}
          onChange={this.onChangePager}
          size="middle"
          bordered
        />
      </div>
    )
  }
}

ImportPublicCard.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    organization: state.budget.organization,
    company: state.login.company,
    language: state.main.language,
    tenantMode: state.main.tenantMode
  };
}

export default connect(mapStateToProps)(Form.create()(ImportPublicCard));
